<template>
  <div>
    <div class="nav">
      <div class="navleft">
        <van-sidebar v-model="activeKey" @change="onChange">
          <van-sidebar-item
            :title="item.name"
            v-for="(item, index) in list"
            :key="index"
          />
        </van-sidebar>
      </div>
      <ul class="navright">
        <li :id="item.key" v-for="(item, index) in list" :key="index">
          <div v-if="activeKey == index">
            <!-- <div class="diyiceng">{{ item.name }}</div> -->
            <div v-for="itemo in item.cs" :key="itemo.id">
              <div class="dierceng" v-if="!itemo.image_url">
                <div class="title">{{ itemo.name }}</div>
              </div>
              <div class="dierceng" v-if="itemo.image_url">
                <van-image
                  width="292rem"
                  height="64rem"
                  fit="contain"
                  :src="itemo.image_url"
                />
              </div>
              <div class="conter">
                <div class="three" v-for="iteme in itemo.cs" :key="iteme.id">
                  <div class="disanceng" @click="$router.push({ path: '/hotsearch', query: { id: iteme.name } })">
                    {{ iteme.name }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      keywords: "",
      activeKey: "0" || this.index,
      flag: false,
      currentKey: "index[0]",
    };
  },
  created() {
    this.axios
      .get("https://apis.netstart.cn/douguo/recipe/flatcatalogs")
      .then((res) => {
        this.list = res.data.result.cs;
      });
  },
  methods: {
    onChange(index) {
      console.log(index);
      // Notify({ type: 'primary', message: index });
    },
    zheshisha(keywords){
      console.log(keywords);
    }
  },
};
</script>

<style lang="scss" scoped>
.van-sidebar-item--select::before {
  background-color: #ffc533;
}
.van-sidebar-item--select {
  text-align: center;
}
.van-sidebar-item {
  text-align: center;
  padding: 7rem 2rem;
}
.nav {
  width: 375rem;
  background-color: #fff;
  display: flex;
  .navleft {
    position: fixed;
    top: 8vh;
    left: 0;
  }
  .navright {
    margin: 0 0 0 22vw;
  }
}
.diyiceng {
  font-size: 20rem;
  font-weight: bold;
  text-align: center;
  margin: 10rem 0;
}
.dierceng {
  font-size: 16rem;
  margin: 0 0 0;
  .title{
    text-align: center;
    font-size: 16rem;
  }
}
.conter {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  padding-left: 5rem;
  margin: 10rem 0;
  .three {
    .disanceng {
      width: 85rem;
      padding: 8rem 0;
      border: 1rem solid #ccc;
      text-align: center;
      font-size: 14rem;
      color: #444;
      border-radius: 5rem;
      margin: 5rem 8rem 0 0;
    }
  }
}
</style>
